<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!--新增CSS-->
		<link rel="stylesheet" href="../css/diystyle.css" />
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" href="../css/app.css" />
		<!--<link href="../css/mui.picker.css" rel="stylesheet" />
		<link href="../css/mui.dtpicker.css" rel="stylesheet" />-->
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
		<script type="text/javascript" charset="utf-8" src="../js/waitCheckList.js"></script>
		<script src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>

		<style>
			html,
			body,
			.mui-content {
				height: 0px;
				margin: 0px;
				background-color: #efeff4;
			}
			
			h5.mui-content-padded {
				margin-left: 3px;
				margin-top: 20px !important;
			}
			
			h5.mui-content-padded:first-child {
				margin-top: 12px !important;
			}
			
			.mui-btn {
				font-size: 16px;
				padding: 8px;
				margin: 3px;
			}
			
			.ui-alert {
				text-align: center;
				padding: 20px 10px;
				font-size: 16px;
			}
		</style>
	</head>

	<body>
		<header id="header" class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" onclick="javascript:history.go(-1)"></a>
			<h1 class="mui-title">待安检XXX小区(3户)</h1>
			<button class="mui-btn mui-btn-blue mui-btn-link mui-pull-right">排序</button>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view" id="userInfoList">
				<li class="mui-table-view-cell mui-media">
					<div class="mui-table">
						<div class="mui-table-cell mui-col-xs-10">
							<h5 class="mui-ellipsis-2 list-table-add">萨尔图区学苑小区23号楼4单元303&nbsp;&nbsp;张三</h5>
							<p class="mui-h6 mui-ellipsis"><span class="mui-icon mui-icon-phone"></span>
								<a href="tel:12345678900">12345678900</a>
								<span class="mui-icon mui-icon-flag "></span>
								<a id="date">2015-10-25&nbsp;10:12</a>
							</p>
						</div>
						<div class="mui-table-cell mui-col-xs-2 mui-text-right">
							<a href="#picture" id='asd0'><span class="mui-icon mui-icon-bars"></span></a>
						</div>
					</div>
				</li>
				<li class="mui-table-view-cell mui-media">
					<div class="mui-table">
						<div class="mui-table-cell mui-col-xs-10">
							<h5 class="mui-ellipsis-2 list-table-add">萨尔图区学苑小区23号楼4单元303&nbsp;&nbsp;李四</h5>
							<p class="mui-h6 mui-ellipsis"><span class="mui-icon mui-icon-phone"></span>
								<a href="tel:12345678900">12345678900</a>
								<span class="mui-icon mui-icon-flag "></span>
								<a id="date1">2015-10-25&nbsp;10:12</a>
							</p>
						</div>
						<div class="mui-table-cell mui-col-xs-2 mui-text-right">
							<a href="#picture" id='asd1'><span class="mui-icon mui-icon-bars"></span></a>
						</div>
					</div>
				</li>
				<li class="mui-table-view-cell mui-media">
					<div class="mui-table">
						<div class="mui-table-cell mui-col-xs-10">
							<h5 class="mui-ellipsis-2 list-table-add">萨尔图区学苑小区23号楼4单元303&nbsp;&nbsp;王五</h5>
							<p class="mui-h6 mui-ellipsis"><span class="mui-icon mui-icon-phone"></span>
								<a href="tel:12345678900">12345678900</a>
								<span class="mui-icon mui-icon-flag "></span>
<!-- 								<a id="date2">2015-10-25&nbsp;10:12</a> -->
								<span id="date2">2015-10-25&nbsp;10:12</span>
							</p>
						</div>
						<div class="mui-table-cell mui-col-xs-2 mui-text-right">
							<a href="#picture" id='asd2'><span class="mui-icon mui-icon-bars"></span></a>
						</div>
					</div>
				</li>

				<li class="mui-table-view-cell mui-media">
					<div class="mui-slider-right mui-disabled">
						<a class="mui-btn mui-btn-yellow mui-icon mui-icon-phone" href="tel:12345678900"></a>
					</div>
					<div class="mui-table mui-slider-handle">
						<div class="mui-table-cell mui-col-xs-10">
							<h5 class="mui-ellipsis-2 list-table-add">萨尔图区学苑小区23号楼4单元302&nbsp;&nbsp;张大</h5>
							<p class="mui-h6 mui-ellipsis">
								<span class="mui-icon mui-icon-flag "></span>
								<a id="date3">2015-10-25&nbsp;10:12</a>
							</p>
						</div>
						<div class="mui-table-cell mui-col-xs-2 mui-text-right">
							<a href="#picture" id='asd3'><span class="mui-icon mui-icon-bars"></span></a>
						</div>
					</div>

				</li>
				<li class="mui-table-view-cell mui-media">
					<div class="mui-slider-right mui-disabled">
						<a class="mui-btn mui-btn-yellow mui-icon mui-icon-phone" href="tel:12345678900"></a>
					</div>
					<div class="mui-table mui-slider-handle">
						<div class="mui-table-cell mui-col-xs-10">
							<h5 class="mui-ellipsis-2 list-table-add">萨尔图区学苑小区23号楼4单元302&nbsp;&nbsp;张二</h5>
							<p class="mui-h6 mui-ellipsis">
								<span class="mui-icon mui-icon-flag "></span>
								<a id="date4">2015-10-25&nbsp;10:12</a>
							</p>
						</div>
						<div class="mui-table-cell mui-col-xs-2 mui-text-right">
							<a href="#picture" id='asd4'><span class="mui-icon mui-icon-bars"></span></a>
						</div>
					</div>

				</li>
				<li class="mui-table-view-cell mui-media">
					<div class="mui-slider-right mui-disabled">
						<a class="mui-btn mui-btn-yellow mui-icon mui-icon-phone" href="tel:12345678900"></a>
					</div>
					<div class="mui-table mui-slider-handle">
						<div class="mui-table-cell mui-col-xs-10">
							<h5 class="mui-ellipsis-2 list-table-add">萨尔图区学苑小区23号楼4单元302&nbsp;&nbsp;张小</h5>
							<p class="mui-h6 mui-ellipsis">
								<span class="mui-icon mui-icon-flag "></span>
								<a id="date5">2015-10-25&nbsp;10:12</a>
							</p>
						</div>
						<div class="mui-table-cell mui-col-xs-2 mui-text-right">
							<a href="#picture" id='asd5'><span class="mui-icon mui-icon-bars"></span></a>
						</div>
					</div>

				</li>

			</ul>
		</div>
		<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#">登记安检结果</a>
				</li>
				<li class="mui-table-view-cell">
					<a id="userinfo" class="userinfo">用户信息</a>
				</li>
				<li class="mui-table-view-cell">
					<a id='demo1' data-options='{}' class="btn ">预约时间</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#">标记用户</a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#picture"><b>取消</b></a>
				</li>
			</ul>
		</div>
		<script src="../js/mui.min.js"></script>
		<!--<script src="../js/mui.picker.js"></script>
		<script src="../js/mui.dtpicker.js"></script>-->
		<script src="../js/mui.picker.min.js"></script>
		<script>
			var userId = '734589218';
			var userName = '张三';
			var userADD = '萨尔图区学苑小区2号楼4单元31';
			var userTEL = '12345678900';
			var dateId = 0;
			mui.plusReady(function() {
				//				getUserInfoList();
			});

			function getUserInfoList() {
				var userInfoList = document.getElementById("userInfoList");
				// 这里我们用的是拼接字符串的方式来动态拼接html部分
				var content = "";
				for (var i = 0, len = 3; i < len; i++) {
					content += '<li class="mui-table-view-cell mui-media"><div class="mui-table"><div class="mui-table-cell mui-col-xs-10">' +
						'<h5 class="mui-ellipsis-2 list-table-add">' + userADD + i + '&nbsp;&nbsp;' + userName + i + '</h5>' +
						'<p class="mui-h6 mui-ellipsis"><span class="mui-icon mui-icon-phone"></span>' +
						'<a href="tel:' + userTEL + i + '">' + userTEL + i + '</a>' + '<span class="mui-icon mui-icon-flag "></span>' +
						'<a id="date" class="ss1">' + '2015-10-25&nbsp;10:12</a>' + '</p></div><div class="mui-table-cell mui-col-xs-2 mui-text-right">' +
						'<a href="#picture" id="' + asd + i + '"><span class="mui-icon mui-icon-bars"></span></a>' +
						'</div></div></li>';
				}
				userInfoList.innerHTML = content;
			}
			(function($) {
				$.init();
				//getUserInfoList();
				//				var date = $('#date')[0];
				var date = $('#date')[0];
				var date1 = $('#date1')[0];
				var date2 = $('#date2')[2];
				var date3 = $('#date3')[0];
				var date4 = $('#date4')[0];
				var date5 = $('#date5')[0];
				//				var date = document.getElementById(dateId);
				var btns = $('.btn');
				btns.each(function(i, btn) {
					btn.addEventListener('tap', function() {
						var optionsJson = this.getAttribute('data-options') || '{}';
						var options = JSON.parse(optionsJson);
						var id = this.getAttribute('id');
						var picker = new $.DtPicker(options);
						picker.show(function(rs) {
							if(dateId==0){
								date.innerText = rs.text;
							}else if(dateId==1){
								date1.innerText = rs.text;
							}else if(dateId==2){
								date2.innerText = rs.text;
							}else if(dateId==3){
								date3.innerText = rs.text;
							}else if(dateId==4){
								date4.innerText = rs.text;
							}else if(dateId==5){
								date5.innerText = rs.text;
							}
							
							//document.getElementsByClassName('ss1').innerHTML = rs.text;
							picker.dispose();
						});
					}, false);
				});
			})(mui);
			$(function() {
				var asd = document.getElementById('asd0');
				asd.addEventListener('tap', function() {
					userName = "zhangsan0";
					userADD = '萨尔图区学苑小区2号楼4单元310';
					userTEL = '12345678900';
					dateId = 0;
					//alert(userName);
				});
				var asd = document.getElementById('asd1');
				asd.addEventListener('tap', function() {
					userName = "lisi";
					userADD = '萨尔图区学苑小区2号楼4单元311';
					userTEL = '12345678901';
					dateId = 1;
					//alert(userName);
				});
				var asd = document.getElementById('asd2');
				asd.addEventListener('tap', function() {
					userName = "wangwu";
					userADD = '萨尔图区学苑小区2号楼4单元312';
					userTEL = '12345678902';
					dateId = 2;
					//alert(userName);
				});
				var asd = document.getElementById('asd3');
				asd.addEventListener('tap', function() {
					userName = "zhangda";
					userADD = '萨尔图区学苑小区2号楼4单元313';
					userTEL = '12345678903';
					dateId = 3;
					//alert(userName);
				});
				var asd = document.getElementById('asd4');
				asd.addEventListener('tap', function() {
					userName = "zhanger";
					userADD = '萨尔图区学苑小区2号楼4单元314';
					userTEL = '12345678904';
					dateId = 4;
					//alert(userName);
				});
				var asd = document.getElementById('asd5');
				asd.addEventListener('tap', function() {
					userName = "zhangxiao";
					userADD = '萨尔图区学苑小区2号楼4单元315';
					userTEL = '12345678905';
					dateId = 5;
					//alert(userName);
				});
				//				document.getElementById('userinfo').addEventListener('tap', function() {
				//					//打开关于页面
				//					mui.openWindow({
				//						url: 'http://10.10.114.92:8080/H5Web/check/check_user.html',
				//						id: 'check_user',
				//						extras: {
				//								userId:'2012168793',
				//								userName:'zhangsan',
				//								userADD:encodeURI("街道"),
				//								userTEL:'13936965482'
				//								
				//							}
				//					});
				//				});
			});
			mui('body').on('tap', '.mui-popover-action li>a', function() {
				var a = this,
					parent;
				//根据点击按钮，反推当前是哪个actionsheet
				for (parent = a.parentNode; parent != document.body; parent = parent.parentNode) {
					if (parent.classList.contains('mui-popover-action')) {
						break;
					}
				}
				//关闭actionsheet
				mui('#' + parent.id).popover('toggle');
				if (a.classList.contains('userinfo')) {
					//window.open('http://10.10.114.92:8080/H5Web/check/check_user.html?userId=' + userId + '&userName=' + encodeURI(userName) + '&userADD=' + encodeURI(userADD) + '&userTEL=' + userTEL);
					window.location.href = 'check_user.html?userId=' + userId + '&userName=' + encodeURI(userName) + '&userADD=' + encodeURI(userADD) + '&userTEL=' + userTEL;
					//打开关于页面
					//					mui.openWindow({
					//						url: 'http://10.10.114.92:8080/H5Web/check/check_user.html',
					//						id: 'check_user',
					//						extras: {
					//								userId:'2012168793',
					//								userName:'zhangsan',
					//								userADD:encodeURI("街道"),
					//								userTEL:'13936965482'
					//								
					//							}
					//					});
				}
				//				window.open('http://www.baidu.html');
			});
		</script>
	</body>

</html>